<template>
  <el-dialog :title="ruleForm.id?'编辑经纪':'添加经纪'" :visible="showDialog" @close="closeFn">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
      <el-form-item label="名称" prop="name">
        <el-input v-model="ruleForm.name" style="width:80%" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="ruleForm.email" style="width:80%" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="ruleForm.phone" style="width:80%" />
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="ruleForm.address" style="width:80%" />
      </el-form-item>
      <el-form-item label="介绍" prop="desc">
        <el-input v-model="ruleForm.desc" type="textarea" rows="5" style="width:80%" />
      </el-form-item>
      <el-form-item label="封面">
        <el-upload
          class="avatar-uploader"
          action="#"
          :file-list="fileList"
          :http-request="uploadFn"
          :limit="1"
          :on-remove="removeFn"
          list-type="picture-card"
          :class="{disabled:fileList.length===1}"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus" />
          <!-- <el-progress v-if="fileList.length>0&&percentage!=100" :percentage="percentage" status="success" /> -->
        </el-upload>
      </el-form-item>
      <el-row type="flex" justify="end">
        <el-button plain size="small" @click="closeFn">取 消</el-button>
        <el-button plain size="small" type="primary" @click="submitFn">确 定</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import COS from 'cos-js-sdk-v5'
import { addManager, updateManger } from '@/api/managerList'

var cos = new COS({
  SecretId: 'AKIDlMhkX3JI0RbT4ORCfusKwMYT7UaQ1KM7',
  SecretKey: 'KI0TjjU1IH0SfbvylIYcT9eusZ0iFagX'
})

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fileList: [],
      ruleForm: {
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: '',
        image: '',
        id: ''
      },
      percentage: 0,
      rules: {
        name: [
          { required: true, message: '请输入经纪名称', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入描述内容', trigger: 'blur' }
        ]
      },
      imageUrl: ''
    }
  },
  methods: {
    uploadFn(data) {
      this.fileList.push({ url: '' })
      cos.putObject({
        Bucket: 'hr-project-1313460461', /* 必须  存储桶名字*/
        Region: 'ap-guangzhou', /* 存储桶所在地域，必须字段 */
        Key: Date.now().toString(), /* 必须  上传后的图片名字*/
        StorageClass: 'STANDARD',
        Body: data.file, // 上传文件对象
        onProgress: (progressData) => {
        //   console.log(progressData)
          this.percentage = progressData.percent * 100
        }
      }, (err, data) => {
        // console.log(51, err || data)
        if (!err) {
          this.fileList[0].url = 'https://' + data.Location
          this.ruleForm.image = 'https://' + data.Location
        }
      })
    },
    // 移除图片
    removeFn() {
      this.fileList = []
    },
    // 确认按钮
    async submitFn() {
      await this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          if (this.ruleForm.id) {
            await updateManger(this.ruleForm)
          } else {
            await addManager(this.ruleForm)
          }
          this.closeFn()
          this.$emit('updateEvent')
        } else {
          return false
        }
      })
    },
    closeFn() {
      this.$refs.ruleForm.resetFields()
      this.fileList = []
      this.ruleForm = {}
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.disabled {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
}
</style>
